<template>
  <transition
    enter-active-class="animate__animated animate__bounceInLeft"
    leave-active-class="animate__animated animate__bounceOutDown"
  >
    <div :class="player" v-if="$root.musicStore.musicID">
      <audio
        :src="`https://music.163.com/song/media/outer/url?id=${$root.musicStore.musicID}.mp3`"
        autoplay
        @timeupdate="timeUpdate"
        @pause="pause"
        @play="play"
        ref="audio"
      ></audio>
      <div :class="playBar" v-if="$root.musicStore.musicID">
        <i ref="randImg">
          <template v-if="$root.musicStore.currentMusic.picUrl">
            <img
              :src="
                $root.musicStore.currentMusic.picUrl +
                '?imageView=1&type=webp&thumbnail=369x0'
              "
              ref="songImg"
            />
          </template>
          <template v-if="$root.musicStore.currentMusic.al">
            <img
              :src="
                $root.musicStore.currentMusic.al.picUrl +
                '?imageView=1&type=webp&thumbnail=369x0'
              "
              ref="songImg"
            />
          </template>
          <!-- <template v-if="$root.musicStore.currentMusic.album.artist">
            <img
              :src="$root.musicStore.currentMusic.album.artist.img1v1Url"
              ref="songImg"
            />
          </template> -->
          <template v-if="$root.musicStore.currentMusic.artists">
            <img
              :src="
                $root.musicStore.currentMusic.artists[0].img1v1Url +
                '?imageView=1&type=webp&thumbnail=369x0'
              "
              ref="songImg"
            />
          </template>
        </i>
        <i @click="isFullPage = true">{{
          $root.musicStore.currentMusic.name
        }}</i>
        <i>
          <canvas
            class="canvas_i"
            @click="changePlay"
            height="140"
            width="140"
            ref="processBtn"
          ></canvas>
        </i>
        <i
          class="iconfont"
          :class="isPlay ? 'icon-iconstop' : 'icon-bofang'"
          @click="changePlay"
        ></i>
      </div>
      <transition
        enter-active-class="animate__animated animate__fadeInUpBig"
        leave-active-class="animate__animated animate__fadeOutDownBig"
      >
        <div class="fullPage" v-if="isFullPage">
          <div class="fullPageBack">
            <p @click="backTo">
              <img src="../assets/return.771d83c2.svg" />
            </p>
            <div class="border">
              <div class="songImg" ref="songImg">
                <template v-if="$root.musicStore.currentMusic.picUrl">
                  <img
                    :src="
                      $root.musicStore.currentMusic.picUrl +
                      '?imageView=1&type=webp&thumbnail=369x0'
                    "
                    ref="songImg"
                  />
                </template>
                <template v-if="$root.musicStore.currentMusic.al">
                  <img
                    :src="
                      $root.musicStore.currentMusic.al.picUrl +
                      '?imageView=1&type=webp&thumbnail=369x0'
                    "
                    ref="songImg"
                  />
                </template>
                <!-- <template
                  v-if="$root.musicStore.currentMusic.album.artist.img1v1Url"
                >
                  <img
                    :src="$root.musicStore.currentMusic.album.artist.img1v1Url"
                    ref="songImg"
                  />
                </template> -->
                <template v-if="$root.musicStore.currentMusic.artists">
                  <img
                    :src="
                      $root.musicStore.currentMusic.artists[0].img1v1Url +
                      '?imageView=1&type=webp&thumbnail=369x0'
                    "
                    ref="songImg"
                  />
                </template>
              </div>
            </div>
            <div class="songName">
              {{ $root.musicStore.currentMusic.name }}
            </div>
            <div class="lyric">
              <ul
                :style="{
                  transform: `translateY(-${moveTop}px)`,
                }"
              >
                <li
                  v-for="(l, index) in $root.lyric"
                  :key="index"
                  ref="lyricLi"
                  :class="{ active: currentIndexs == index }"
                >
                  {{ l.lyric }}
                </li>
              </ul>
            </div>
            <div class="progress">
              <div class="current">
                {{ parseInt(currentTime / 60) }}:{{
                  parseInt(currentTime % 60)&lt;10 ? "0"+parseInt(currentTime % 60) : parseInt(currentTime % 60)
                }}
              </div>
              <input
                type="range"
                step=""
                min="0"
                :max="duration"
                :value="currentTime"
                @change="changeTime"
              />
              <div class="duration">
                {{
                  parseInt(duration / 60) || "0"
                }}:{{  parseInt(duration % 60)&lt;10 ? "0"+parseInt(duration % 60) : parseInt(duration % 60) ||"00"}}
              </div>
            </div>
            <div class="controlBar">
              <div class="btn" @click="playOrder">
                <img v-if="playMode" src="../assets/all.f2e11a3e.svg" />
                <img v-if="!playMode" src="../assets/random.c3cb06f1.svg" />
              </div>
              <div class="btn" @click="preSong">
                <img src="../assets/上一首.png" />
              </div>
              <div class="btn" @click="changePlay">
                <img v-if="!isPlay" src="../assets/播放.svg" />
                <img v-if="isPlay" src="../assets/暂停.png" />
              </div>
              <div class="btn" @click="nextSong">
                <img src="../assets/下一首.png" />
              </div>
              <div class="songMenu" @click="menu">
                <img src="../assets/菜单.svg" />
              </div>
            </div>
            <transition
              enter-active-class="animate__animated animate__bounceInLeft"
              leave-active-class="animate__animated animate__bounceOutLeft"
            >
              <div class="menu" v-if="menuShow">
                <div class="backWall" @click="menuShow=false"></div>
                <ul>
                  <li
                    v-for="(sl, index) in $root.musicStore.musicList"
                    :key="sl.id"
                    :style="{
                      color: sl.id == $root.musicStore.musicID ? 'red' : '',
                    }"
                    @click="dbl_play(sl)"
                  >
                    {{ index + 1 }}.{{ sl.name }}
                  </li>
                </ul>
              </div>
            </transition>
          </div>
        </div>
      </transition>
    </div>
  </transition>
</template>
<script>
export default {
  name: "Play",
  data() {
    return {
      isPlay: true,
      isFullPage: false,
      duration: 0,
      currentTime: 0,
      player: "player",
      playBar: "playBar",
      playMode: true,
      menuShow: false,
      currentIndexs: 0,
      moveTop: 0,
      currentTime1: 0,
    };
  },
  watch: {
    isFullPage: function (isFullPage) {
      if (isFullPage) {
        if (this.isPlay == false) {
          this.$nextTick(() => {
            let songImg = this.$refs.songImg;
            songImg.style.animationPlayState = "paused";
          });
        }
        this.player = "player transparent";
        this.playBar = "playBar opacity";
      } else {
        setTimeout(() => {
          this.player = "player animate__animated animate__bounceInUp";
          this.playBar = "playBar";
        }, 870);
      }
    },
  },
  methods: {
    backTo() {
      this.isFullPage = false;
      this.menuShow = false;
    },
    play(event) {
      this.isPlay = false;
      this.changePlay();
      this.timeUpdate(event);
    },
    dbl_play(item) {
      this.$root.musicStore.musicID = item.id;
      this.$root.musicStore.currentMusic = item;
    },
    pause(event) {
      this.isPlay = true;
      this.changePlay();
      this.timeUpdate(event);
    },
    changeSong() {
      let currentIndex = 0;
      let musicList = this.$root.musicStore.musicList;
      for (let i in musicList) {
        if (musicList[i].id === this.$root.musicStore.musicID) {
          currentIndex = i;
          break;
        }
      }
      return currentIndex;
    },
    preSong() {
      let currentIndex = this.changeSong();
      let musicList = this.$root.musicStore.musicList;
      currentIndex--;
      if (currentIndex < 0) {
        currentIndex = musicList.length - 1;
      }
      this.$root.musicStore.musicID = musicList[currentIndex].id;
      this.$root.musicStore.currentMusic = musicList[currentIndex];
    },
    nextSong() {
      let currentIndex = this.changeSong();
      let musicList = this.$root.musicStore.musicList;
      currentIndex++;
      if (currentIndex >= musicList.length) {
        currentIndex = 0;
      }
      if (this.playMode == false) {
        let rand = parseInt(musicList.length * Math.random());
        this.$root.musicStore.musicID = musicList[rand].id;
        this.$root.musicStore.currentMusic = musicList[rand];
      } else {
        this.$root.musicStore.musicID = musicList[currentIndex].id;
        this.$root.musicStore.currentMusic = musicList[currentIndex];
      }
    },
    playOrder() {
      if (this.playMode) {
        this.playMode = false;
      } else {
        this.playMode = true;
      }
    },
    menu() {
      if (this.menuShow) {
        this.menuShow = false;
      } else {
        this.menuShow = true;
      }
    },
    changeTime(event) {
      let time = event.target.value;
      this.currentTime = time;
      this.$refs.audio.currentTime = time;
    },
    changePlay() {
      let audio = this.$refs.audio;
      let randImg = this.$refs.randImg;
      let songImg = null;
      if (this.isFullPage) {
        songImg = this.$refs.songImg;
      }
      if (this.isPlay) {
        audio.pause();
        this.isPlay = false;
        randImg.style.animationPlayState = "paused";
        if (this.isFullPage) {
          songImg.style.animationPlayState = "paused";
        }
      } else {
        audio.play();
        this.isPlay = true;
        randImg.style.animationPlayState = "running";
        if (this.isFullPage) {
          songImg.style.animationPlayState = "running";
        }
      }
    },
    timeUpdate(event) {
      let audio = event.target;
      let currentTime = audio.currentTime;
      this.currentTime1 = audio.currentTime;
      let duration = audio.duration;
      this.currentTime = currentTime;
      this.drawCircle(currentTime, duration);
      this.duration = duration;
    },
    drawCircle(currentTime, duration) {
      let canvas = this.$refs.processBtn.getContext("2d"); // 画布
      // canvas.width=20;
      // canvas.height=20;
      canvas.clearRect(0, 0, 80, 80); // 清除画布区域
      canvas.beginPath();
      canvas.strokeStyle = "#fff";
      canvas.lineWidth = 8;
      canvas.arc(70, 70, 50, 0, 2 * Math.PI);
      canvas.stroke();
      canvas.closePath();

      canvas.beginPath();
      canvas.strokeStyle = "#6161ff";
      canvas.lineWidth = 8;
      canvas.arc(
        70,
        70,
        50,
        0,
        2 * Math.PI * parseFloat(currentTime / duration)
      );
      canvas.stroke();
      canvas.closePath();
    },
  },
  created() {},
  updated() {
    let currentTime = this.currentTime1;
    // //滚动歌词
    // this.play_tos = this.play_to;
    if (
      this.$root.lyric == undefined ||
      this.$root.lyric == null ||
      this.isFullPage == false
    ) {
      return false;
    } else {
      for (var i = 0; i < this.$root.lyric.length; i++) {
        //循环歌词  13秒
        if (i >= this.$root.lyric.length - 1) {
          //循环到最后一条的,不需要和下一条匹配 直接显示为最后一条高亮
          this.currentIndexs = i;
          break;
        }
        //当前播放时间 大于当前歌词时间 小于下一条歌词时间，当前这条歌词需要高亮
        // console.log(this.song_particulars);
        if (this.$root.lyric[i].time == undefined || currentTime == undefined) {
          return false;
        } else {
          if (
            this.$root.lyric[i].time <= currentTime &&
            currentTime < this.$root.lyric[i + 1].time
          ) {
            if (i >= 4) {
              //获取当前播放歌词上一条歌词距离父元素上面的距离.
              this.moveTop = this.$refs.lyricLi[i - 4].offsetTop;
              //console.log(this.$refs.lyricLi[i - 4].offsetTop);
            } else {
              this.moveTop = 0;
            }
            this.currentIndexs = i;
            break;
          }
        }
      }
    }
  },
};
</script>
<style lang="less" scoped>
.player {
  position: fixed;
  z-index: 9;
  bottom: 0px;
  width: 100%;
  background-color: #fab5ad;
  .playBar {
    display: flex;
    align-items: center;
    padding: 5px 10px;
    i {
      &:first-of-type {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        overflow: hidden;
        animation: randImg 5s linear 0s infinite;
      }
      &:nth-of-type(2) {
        flex: 1;
        text-align: center;
        font-style: normal;
        line-height: 50px;
        height: 50px;
      }
    }
    .canvas_i {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      position: relative;
      canvas {
        width: 50px;
        height: 50px;
      }
    }
    .iconfont {
      position: absolute;
      top: 22px;
      right: 27px;
      z-index: 10;
    }
  }
  .fullPage {
    position: relative;
    width: 100vw;
    height: 100vh;
    z-index: 20;
    background-color: #1e1e1e;
    .fullPageBack {
      position: absolute;
      z-index: 21;
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 0.3);
    }
    p {
      width: 10vw;
      height: 10vh;
      img {
        height: 100%;
        width: 100%;
      }
    }
    .border {
      margin: -3vh auto;
      width: 296px;
      height: 296px;
      background: url(../assets/disc-plus.png) no-repeat;
      background-size: 296px 296px;
      position: relative;
      .songImg {
        position: absolute;
        top: 56px;
        left: 56px;
        width: 184px;
        height: 184px;
        border-radius: 50%;
        overflow: hidden;
        animation: randImg 5s linear 0s infinite;
      }
    }
    .songName {
      height: 3vh;
      margin-top: 6vh;
      text-align: center;
      font-size: 18px;
      color: #fefefe;
      span {
        font-size: 16px;
        color: #ffffff99;
      }
    }
    .lyric {
      height: 25vh;
      overflow-y: scroll;
      text-align: center;
      color: #ffffff99;
      font-size: 16px;
      line-height: 28px;
      margin-top: 2vh;
    }
    .progress {
      width: 70vw;
      margin: 3vh auto;
      position: relative;
      input {
        width: 100%;
        height: 3px;
      }
      .current {
        position: absolute;
        left: -45px;
        top: 4px;
      }
      .duration {
        position: absolute;
        right: -42px;
        top: 3px;
      }
    }
    .controlBar {
      width: 100%;
      display: flex;
      position: absolute;
      bottom: 20px;
      justify-content: space-around;
      .btn {
        width: 37px;
        height: 37px;
      }
      .songMenu {
        width: 30px;
        height: 30px;
        padding-top: 3px;
      }
    }
    .menu {
      width: 80vw;
      height: 32vh;
      background-color: rgb(207, 202, 203);
      position: fixed;
      z-index: 30;
      bottom: 62px;
      border-radius: 10px;
      overflow-y: scroll;
      .backWall {
        width: 100vw;
        height: 90vh;
        position: fixed;
        top: 0px;
        background-color: transparent;
        z-index: 20;
      }
      ul {
        position: absolute;
        z-index: 30;
        li {
          display: block;
          width: 80vw;
          height: 30px;
          overflow: hidden;
          line-height: 30px;
          font-size: 16px;
          border-bottom: 1px solid #eee;
          padding: 0px 5px;
        }
      }
    }
  }
}
.transparent {
  background-color: transparent;
}
.opacity {
  opacity: 0;
}
.active {
  color: skyblue;
}
@keyframes randImg {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>